<!DOCTYPE html>
<html lang="zh-cmn-Hans">
	<head>
		<!-- 线路 -->
		<meta charset="utf-8">
		<title>研学路线</title>
		<link rel="stylesheet" type="text/css" href="css/index/index_circuit.css"/>
		
	</head>
	<body>
		<header>
			<iframe src="tool/header/index_header_search.html" width="100%" height="130px" frameborder="0" scrolling="no"></iframe>
		</header>
		<section>
			<!-- 线路上方的大图片 -->
			<div id="circuit-topimg">
				<img src="https://img.xiaopiu.com/userImages/img2141816f85232698.jpg" >
			</div>
			<!-- 当前页面的位置 -->
			<div id="circuit-topposition">
				<div class="index_nav">
					<h4>您的位置 >|</h4>
					<h4><a href="">首页 > </a></h4>
					<h4><a href="">线路</a></h4>
				</div>
			</div>
			<!-- 筛选部分 -->
			<div class="cation-content">
			    <div class="cation-middle">
			        <dl class="cation-list">
			            <dt>路线特色</dt>
			            <dd class="circuitfeature">
			                <a href="javascript:void(0)" rel="" name="mode" class="all on">全部</a>
			                <a href="javascript:void(0)" rel="热门推荐" name="mode" class="default">热门推荐</a>
			                <a href="javascript:void(0)" rel="传统文化" name="mode" class="default">传统文化</a>
			                <a href="javascript:void(0)" rel="革命传统" name="mode" class="default">革命传统</a>
			                <a href="javascript:void(0)" rel="国情教育" name="mode" class="default">国情教育</a>
			                <a href="javascript:void(0)" rel="国防工科" name="mode" class="default">国防工科</a>
			                <a href="javascript:void(0)" rel="自然生态" name="mode" class="default">自然生态</a>
			            </dd>
			        </dl>
			        <dl class="cation-list">
			            <dt>路线范围</dt>
			            <dd class="circuitscope">
			                <a href="javascript:void(0)" rel="" name="theme" class="all on">全部</a>
			                <a href="javascript:void(0)" rel="县区路线" name="theme" class="default">县区路线</a>
			                <a href="javascript:void(0)" rel="地市路线" name="theme" class="default">地市路线</a>
			                <a href="javascript:void(0)" rel="省内路线" name="theme" class="default">省内路线</a>
			                <a href="javascript:void(0)" rel="国内路线" name="theme" class="default">国内路线</a>
			                <a href="javascript:void(0)" rel="港澳台路线" name="theme" class="default">港澳台路线</a>
							<a href="javascript:void(0)" rel="海外路线" name="theme" class="default">海外路线</a>
			            </dd>
			        </dl>
			        <dl class="cation-list">
			            <dt>服务对象</dt>
			            <dd class="serviceobject">
			                <a href="javascript:void(0)" rel="" name="system" class="all on">全部</a>
			                <a href="javascript:void(0)" rel="小学生" name="system" class="default">小学生</a>
			                <a href="javascript:void(0)" rel="初中生" name="system" class="default">初中生</a>
			                <a href="javascript:void(0)" rel="高中生" name="system" class="default">高中生</a>
			            </dd>
			        </dl>
			    </div>
			</div>
			<!-- 筛选内容 -->
			<div id="filter-content">
				<ul id="filter-list">
					<li class="filter-list-content">
						<div class="list-content-left">
							<img src="img/index/饥饿龙.jpg" >
						</div>
						<div class="list-content-center">
							<p>河南省教育厅关于对河南省研学实践教育精品课程和精品路线评选结果公示的通知</p>
							<div>
								<img style="border-radius: 50%;" src="img/index/饥饿龙.jpg" width="50px" height="50px">
								<span class="circuit-username">憨八龟老王</span>
								<span class="circuit-time">·&nbsp;2020/6/28</span>
							</div>
							<ul>
								<li><img src="img/index/eye.png" width="20px" height="20px" ><span>&nbsp;2020&nbsp;</span></li>
								<li><img src="img/index/collect.png" width="18px" height="18px" ><span>&nbsp;2020&nbsp;&nbsp;</span></li>
								<li><img src="img/index/praise.png" width="13px" height="13px" ><span>&nbsp;2020</span></li>
							</ul>
						</div>
						<div class="list-content-right">
							<div>
								<div class="relationname">
									河南青年旅行社
								</div>
								<div class="phonenumber">
									<span>13366666666</span>
									<img src="./img/index/phone.png" width="30px" height="30px" >
								</div>
							</div>
						</div>
					</li>
					<li class="filter-list-content">
						<div class="list-content-left">
							<img src="img/index/饥饿龙.jpg" >
						</div>
						<div class="list-content-center">
							<p>河南省教育厅关于对河南省研学实践教育精品课程和精品路线评选结果公示的通知</p>
							<div>
								<img style="border-radius: 50%;" src="img/index/饥饿龙.jpg" width="50px" height="50px">
								<span class="circuit-username">憨八龟老王</span>
								<span class="circuit-time">·&nbsp;2020/6/28</span>
							</div>
							<ul>
								<li><img src="img/index/eye.png" width="20px" height="20px" ><span>&nbsp;2020&nbsp;</span></li>
								<li><img src="img/index/collect.png" width="18px" height="18px" ><span>&nbsp;2020&nbsp;&nbsp;</span></li>
								<li><img src="img/index/praise.png" width="13px" height="13px" ><span>&nbsp;2020</span></li>
							</ul>
						</div>
						<div class="list-content-right">
							<div>
								<div class="relationname">
									河南青年旅行社
								</div>
								<div class="phonenumber">
									<span>13366666666</span>
									<img src="./img/index/phone.png" width="30px" height="30px" >
								</div>
							</div>
						</div>
					</li>
					<li class="filter-list-content">
						<div class="list-content-left">
							<img src="img/index/饥饿龙.jpg" >
						</div>
						<div class="list-content-center">
							<p>河南省教育厅关于对河南省研学实践教育精品课程和精品路线评选结果公示的通知</p>
							<div>
								<img style="border-radius: 50%;" src="img/index/饥饿龙.jpg" width="50px" height="50px">
								<span class="circuit-username">憨八龟老王</span>
								<span class="circuit-time">·&nbsp;2020/6/28</span>
							</div>
							<ul>
								<li><img src="img/index/eye.png" width="20px" height="20px" ><span>&nbsp;2020&nbsp;</span></li>
								<li><img src="img/index/collect.png" width="18px" height="18px" ><span>&nbsp;2020&nbsp;&nbsp;</span></li>
								<li><img src="img/index/praise.png" width="13px" height="13px" ><span>&nbsp;2020</span></li>
							</ul>
						</div>
						<div class="list-content-right">
							<div>
								<div class="relationname">
									河南青年旅行社
								</div>
								<div class="phonenumber">
									<span>13366666666</span>
									<img src="./img/index/phone.png" width="30px" height="30px" >
								</div>
							</div>
						</div>
					</li>
					<li class="filter-list-content">
						<div class="list-content-left">
							<img src="img/index/饥饿龙.jpg" >
						</div>
						<div class="list-content-center">
							<p>河南省教育厅关于对河南省研学实践教育精品课程和精品路线评选结果公示的通知</p>
							<div>
								<img style="border-radius: 50%;" src="img/index/饥饿龙.jpg" width="50px" height="50px">
								<span class="circuit-username">憨八龟老王</span>
								<span class="circuit-time">·&nbsp;2020/6/28</span>
							</div>
							<ul>
								<li><img src="img/index/eye.png" width="20px" height="20px" ><span>&nbsp;2020&nbsp;</span></li>
								<li><img src="img/index/collect.png" width="18px" height="18px" ><span>&nbsp;2020&nbsp;&nbsp;</span></li>
								<li><img src="img/index/praise.png" width="13px" height="13px" ><span>&nbsp;2020</span></li>
							</ul>
						</div>
						<div class="list-content-right">
							<div>
								<div class="relationname">
									河南青年旅行社
								</div>
								<div class="phonenumber">
									<span>13366666666</span>
									<img src="img/index/phone.png" width="30px" height="30px" >
								</div>
							</div>
						</div>
					</li>
				</ul>
			</div>
		</section>
		<footer>
			<!-- 尾部 -->
		</footer>
		<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
		<script type="text/javascript">
		    $(".circuitfeature a").click(function() {
				$(this).css({"background":"#00C8A9","color":"white"});
				$(this).siblings().css({"background":"white","color":"#8d8d91"});
			});
			$(".circuitscope a").click(function() {
				$(this).css({"background":"#00C8A9","color":"white"});
				$(this).siblings().css({"background":"white","color":"#8d8d91"});
			});
			$(".serviceobject a").click(function() {
				$(this).css({"background":"#00C8A9","color":"white"});
				$(this).siblings().css({"background":"white","color":"#8d8d91"});
			});
		</script>
	</body>
</html>
